<template>
  <view class="container">
    <uni-card v-for="(item, index) in detailsList" :key="index" class="mycard">
      <template #title>
        <div style="margin-top: 1vh">{{ item.source }}</div>
      </template>
      <template #actions>
        <div>{{ item.details_in_date }}</div>
      </template>
      <template #cover>
        <div class="text-red">+{{ item.amount }}</div>
      </template>
    </uni-card>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue'
import { getDetailAPI } from '@/services/my'
interface DataItem {
  id: string
  user_id: string
  source: string
  amount: number
  details_in_date: Date // 假设这是一个日期字符串，根据实际情况调整类型
}
const userId = uni.getStorageSync('userInfo').id || ''
const detailsList = ref<DataItem[]>([])
const getdetail = async () => {
  if (userId) {
    const data = await getDetailAPI(userId)
    detailsList.value = data.data?.reverse()
  } else {
    uni.showToast({
      title: '请先登录',
      icon: 'error',
    })
  }
}

onMounted(() => {
  nextTick(() => {
    getdetail()
  })
})
</script>

<style lang="scss" scoped>
.text-red {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}

/* 使用 ::v-deep */
::v-deep .uni-card--shadow {
  box-shadow: none;
}

::v-deep .uni-card--border {
  border: none;
}

::v-deep .uni-card {
  box-shadow: none !important;
}
</style>
